<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <base href="<%=basePath%>">
	<%@include file="/jsp/common/jspCommonHeadSetting.jsp"%>
	<title>network</title>
  </head>
  
<html>       
<body>
	<script type="text/javascript">    
var links = [  
 {"source":1,"target":0,"value":1},
{"source":2,"target":0,"value":8},
{"source":3,"target":0,"value":10},
{"source":3,"target":2,"value":6},
{"source":4,"target":0,"value":1},
{"source":5,"target":0,"value":1},
{"source":6,"target":0,"value":1},
{"source":7,"target":0,"value":1},
{"source":8,"target":0,"value":2},
{"source":9,"target":0,"value":1},
{"source":11,"target":10,"value":1},
{"source":11,"target":3,"value":3},
{"source":11,"target":2,"value":3},
{"source":11,"target":0,"value":5},
{"source":12,"target":11,"value":1},
{"source":13,"target":11,"value":1},
{"source":14,"target":11,"value":1},
{"source":15,"target":11,"value":1},
{"source":17,"target":16,"value":4},
{"source":18,"target":16,"value":4},
{"source":18,"target":17,"value":4},
{"source":19,"target":16,"value":4},
{"source":19,"target":17,"value":4},
{"source":19,"target":18,"value":4},
{"source":20,"target":16,"value":3}   
];                                                                  
                                                                    
var nodes = {};                                                     
                                                                    
               
links.forEach(function(link) {  
console.log(nodes);                                    
  link.source = nodes[link.source]   
  || (nodes[link.source] = {name: link.source});
    
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});  
});  
  
var width = 960,  
    height = 500;  
  
var force = d3.layout.force()  
    .nodes(d3.values(nodes))  
    .links(links)  
    .size([width, height])  
    .linkDistance(60)  
    .charge(-300)  
    .on("tick", tick)  
    .start();  
  
var svg = d3.select("body").append("svg")  
    .attr("width", width)  
    .attr("height", height);  
 
var link = svg.selectAll(".link")  
    .data(force.links())  
    .enter().append("line")  
    .attr("class", "link");  
  
var colors=d3.scale.category20();   
     
link.style("stroke",function(d){  
    return colors(d.color);    
})    
.style("stroke-width",function(d,i){  
     return Math.sqrt(d.value);   
});  
 
var node = svg.selectAll(".node")  
    .data(force.nodes())  
    .enter().append("g") 
    .attr("class", "node")  
    .on("mouseover", mouseover)  
    .on("mouseout", mouseout)  
    .call(force.drag);
                                             
function  radius (d){   
if(!d.weight){
d.weight=1;  
}                                                
    return Math.log(d.weight)*10+5;                                     
}                                                                     
node.append("circle")  
    .attr("r",function(d){                        
    return radius (d);                            
 })                                             
.style("fill",function(d){             
    return colors(d.weight*d.weight*d.weight);  
}) ;  
  
node.append("text")  
    .attr("x", 12)  
    .attr("dy", ".35em")  
    .text(function(d) { return d.name; }); 
  
function tick() { 
  link  
      .attr("x1", function(d) { return d.source.x; })  
      .attr("y1", function(d) { return d.source.y; })  
      .attr("x2", function(d) { return d.target.x; })  
      .attr("y2", function(d) { return d.target.y; });  
  
  node  
      .attr("transform", function(d) {   
            return "translate(" + d.x + "," + d.y + ")";   
      });  
}  
  
function mouseover() {  
  d3.select(this).select("circle").transition()  
      .duration(750)  
      .attr("r", function(d){                        
    return radius (d)+10;                            
 }) ;  
}  
  
function mouseout() {  
  d3.select(this).select("circle").transition()  
      .duration(750)  
      .attr("r", function(d){                          
    return radius (d);                            
 }) ;  
}  
        </script>

</body>

</html>
